<template>
	<view class="page-container">
		<view class="search-container">
			<Search></Search>
		</view>
		
		<view class="content-box">
			<view class="list-box">
				<scroll-view scroll-y class="menu-scroll">
					<Menu></Menu>
				</scroll-view>
			</view>
			<view class="show-box">
				<scroll-view scroll-y class="products-scroll">
					<Products></Products>
				</scroll-view>
			</view>
		</view>
		<CustomTabBar />
	</view>
</template>

<script setup lang="ts">
import Search from '@/components/search.vue';
import Menu from '@/components/menu.vue';
import Products from '@/components/Products.vue'
import CustomTabBar from '@/components/CustomTabBar.vue';

import {ref,watch} from 'vue'
import { useCommonStore } from '../../stores/useCommonStore';

// 用于存储当前选中的索引
const selectedIndex = ref<number>(-1);
const commonStore = useCommonStore();

console.log('选中的索引：', commonStore.nowSelectedId) 
</script>

<style scoped lang="scss">
	html, body {
	    /* 防止根元素出现滚动条 */
	    overflow: hidden;
	    height: 100vh;
	    margin: 0;
	    padding: 0;
	}
.page-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* #ifdef  MP-WEIXIN*/
	padding-top: 2.4rem;
	/* #endif*/
}
.search-container {
	flex-shrink: 0; /* 防止搜索框被压缩*/
}

.content-box {
	flex: 1;
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem;
	overflow: hidden; /* 防止内容溢出*/
}
.list-box {
	width: 8.13rem;
	height: auto;
	overflow: hidden; /* 确保内容不会溢出容器*/
	/* padding-bottom: 3rem;*/
}
.menu-scroll {
	height: 100%;
	/* 确保菜单容器填满scroll-view
	:deep(.menu-container) { 
		height: 100%;
	}*/
}
.show-box {
	margin-left: 0.1rem;
	flex: 1; /* 让右侧区域占据剩余空间*/
	height: auto;
	/* padding-bottom: 3rem;*/
}
.products-scroll{
	height: 100%; 
	/*确保菜单容器填满scroll-view
	:deep(.menu-container) { 
		height: 100%;
	}*/
}
</style>
